<template>
  <div class="layout-container">
    <div class="layout-container-form flex space-between">
      <div class="layout-container-form-handle">
        <el-button type="primary" :icon="Plus" @click="handleAdd">{{ $t('message.common.add') }}</el-button>
      </div>
    </div>
    <div class="layout-container-table">
      <Table
        ref="table"
        v-model:page="page"
        v-loading="loading"
        :showIndex="true"
        :showSelection="true"
        :data="tableData"
        @getTableData="getTableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="id" label="id" align="center" />
        <el-table-column prop="projectName" label="project name" align="center" />
        <el-table-column prop="groupName" label="group name" align="center" />
        <el-table-column prop="name" label="task name" align="center" />
        <el-table-column prop="cron" label="cron" align="center" />

        <el-table-column :label="$t('message.common.handle')" align="center" fixed="right" width="200">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row)">{{ $t('message.common.update') }}</el-button>
            <el-popconfirm :title="$t('message.common.delTip')" @confirm="handleDel(scope.row.id)">
              <template #reference>
                <el-button type="danger">{{ $t('message.common.del') }}</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </Table>
      <add-job-dialog :center-dialog-visible="showCreateDialog" :current-row="currentRow" @close="handleClose"/>
    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent, reactive, ref} from 'vue'
import Table from '@/components/table/index.vue'
import {Page} from '@/components/table/type'
import AddJobDialog from './addJobDialog.vue'
import {ElMessage} from 'element-plus'
import type {LayerInterface} from '@/components/layer/index.vue'
import {Delete, Plus, Search} from '@element-plus/icons'
import TaskJobApi from "@/api/project/taskJobApi";

export default defineComponent({
  name: 'TaskJob',
  components: {
    Table,
    AddJobDialog,
  },
  setup() {
    // 存储搜索用的数据
    const query = reactive({
      input: ''
    })
    // 弹窗控制器
    const layer: LayerInterface = reactive({
      show: false,
      title: '新增',
      showButton: true
    })
    // 分页参数, 供table使用
    const page: Page = reactive({
      page: 0,
      size: 10,
      total: 0,
      index: 0
    })
    const loading = ref(true)
    const showCreateDialog = ref(false)
    const tableData = ref([])
    const chooseData = ref([])
    const currentRow = ref({})
    const handleSelectionChange = (val: []) => {
      getTableData(false)
    }

    const getTableData = (init: boolean) => {
      loading.value = true
      page.page = page.index as number - 1
      if (init) {
        page.page = 0
      }
      let params = {
        page: page.page,
        size: page.size,
        sort: {
          direction: 'DESC',
          properties: ['id']
        }
      }

      TaskJobApi.findAll(params)
      .then((res) => {
        const qqq = res as unknown as {
          content: any,
          totalElements: number
        }
        tableData.value = qqq.content
        page.total = qqq.totalElements
        page.index = (page.page as number) + 1
      })
      .catch(error => {
        tableData.value = []
        page.page = 0
        page.total = 0
      })
      .finally(() => {
        loading.value = false
      })
    }

    const handleDel = (id: number) => {
      TaskJobApi.deleteById(id).then(() => {
        ElMessage({
          message: "删除成功",
          type: 'success',
          duration: 1000
        })
        getTableData(false)
      })
    }

    const handleAdd = () => {
      currentRow.value = {}
      showCreateDialog.value = true
    }

    const handleClose = () => {
      showCreateDialog.value = false
      getTableData(false)
    }

    const handleEdit = (row: object) => {
      currentRow.value = row
      showCreateDialog.value = true
    }
    getTableData(true)
    return {
      Plus,
      Search,
      Delete,
      query,
      tableData,
      chooseData,
      loading,
      page,
      layer,
      handleSelectionChange,
      handleAdd,
      handleEdit,
      handleDel,
      getTableData,
      showCreateDialog,
      handleClose,
      currentRow
    }
  }
})
</script>

<style lang="scss" scoped>

</style>